import React from 'react';
import { Result, Table, Row, Col, Button, Tabs, Tooltip} from 'antd';
import '../../operator.less';
import { IconFont } from '../../../../../components/IconFont';
const creatHistory = require('history').createHashHistory
const history = creatHistory();
export default function(props) {
  const goback = () => {
    history.goBack();
  }
  return (
    <>
      <div className='strategy-operater-content'>
        <div className='strategy-export-success'>
           <Result
             icon={<IconFont type='iconsuccess-' style={{ fontSize: '42px', fontWeight: 'normal' }} />}
             title='导入成功，审核通过后生效'
             subTitle={ `本次共导入${props.data.strategies ? (props.data.strategies.count + '条策略') : ''} 
             ${props.data.components.count}条组件  
             ${props.data.fields.count}个字段 
             ${props.data.features.count}个指标
             ${props.data.event.count}个事件`}
           />
           <Row type='flex' justify='center'>
               <Col span={12} style={{ textAlign: 'center' }}>
                 <Button type='primary' onClick={() => goback()}>
                   确定
                 </Button>
               </Col>
           </Row>
        </div>
        <Tabs defaultActiveKey='1'>
         { props.data.strategy && <Tabs.TabPane tab='策略' key='1'>
          <Table
              className='strategy-operater-table'
              dataSource={props.data.strategy.lists || []}
              columns={[
                {
                  title: '序号',
                  render: (text, record, index) => {
                    return <>{index + 1}</>;
                  }
                },
                {
                  title: '策略名称',
                  key: 'name',
                  dataIndex: 'name',
                  width: 200,
                  render: (text, record) => {
                    return (
                      <Tooltip title={text} placement='topLeft'>
                        {text}
                      </Tooltip>
                    );
                  }
                },
                {
                  title: '组件模式',
                  key: 'strategy_mode_name',
                  dataIndex: 'strategy_mode_name',
                  width: 200,
                  render: (text, record) => {
                    return (
                      <Tooltip title={text} placement='topLeft'>
                        {text}
                      </Tooltip>
                    );
                  }
                },
                {
                  title: '导入状态',
                  key: 'status',
                  dataIndex: 'status',
                  width: 200,
                  render: (text, record) => {
                    return (text && '导入成功') || '导入失败';
                  }
                }
              ]}
              rowKey={(record, index) => index}
              pagination={false}
            ></Table>
          </Tabs.TabPane>}
          <Tabs.TabPane tab='组件' key='2'>
            <Table
              className='strategy-operater-table'
              dataSource={props.data.components.lists || []}
              columns={[
                {
                  title: '序号',
                  render: (text, record, index) => {
                    return <>{index + 1}</>;
                  }
                },
                {
                  title: '组件名称',
                  key: 'name',
                  dataIndex: 'name',
                  width: 200,
                  render: (text, record) => {
                    return (
                      <Tooltip title={text} placement='topLeft'>
                        {text}
                      </Tooltip>
                    );
                  }
                },
                {
                  title: '组件模式',
                  key: 'strategy_mode_name',
                  dataIndex: 'strategy_mode_name',
                  width: 200,
                  render: (text, record) => {
                    return (
                      <Tooltip title={text} placement='topLeft'>
                        {text}
                      </Tooltip>
                    );
                  }
                },
                {
                  title: '导入状态',
                  key: 'status',
                  dataIndex: 'status',
                  width: 200,
                  render: (text, record) => {
                    return (text && '导入成功') || '导入失败';
                  }
                }
              ]}
              rowKey={(record, index) => index}
              pagination={false}
            ></Table>
          </Tabs.TabPane>
          <Tabs.TabPane tab='字段' key='3'>
            <Table
              className='strategy-operater-table'
              dataSource={props.data.fields.lists || []}
              columns={[
                {
                  title: '序号',
                  render: (text, record, index) => {
                    return <>{index + 1}</>;
                  }
                },
                {
                  title: '字段名称',
                  key: 'name',
                  dataIndex: 'name',
                  ellipsis: true,
                  width: 200
                },
                {
                  title: '描述',
                  key: 'remark',
                  dataIndex: 'remark',
                  ellipsis: true,
                  width: 200,
                  render: (text, record) => {
                    return (
                      <Tooltip title={text} placement='topLeft'>
                        {text}
                      </Tooltip>
                    );
                  }
                },
                {
                  title: '导入状态',
                  key: 'status',
                  dataIndex: 'status',
                  width: 200,
                  render: (text, record) => {
                    return (text && '导入成功') || '导入失败';
                  }
                }
              ]}
              rowKey={(record, index) => index}
              pagination={false}
            ></Table>
          </Tabs.TabPane>
          <Tabs.TabPane tab='指标' key='4'>
            <Table
              className='strategy-operater-table'
              dataSource={props.data.features.lists || []}
              columns={[
                {
                  title: '序号',
                  render: (text, record, index) => {
                    return <>{index + 1}</>;
                  }
                },
                {
                  title: '指标名称',
                  key: 'name',
                  dataIndex: 'name',
                  ellipsis: true,
                  width: 150
                },
                {
                  title: '描述',
                  key: 'remark',
                  dataIndex: 'remark',
                  ellipsis: true
                },
                {
                  title: '导入状态',
                  key: 'status',
                  dataIndex: 'status',
                  width: 200,
                  render: (text, record) => {
                    return (text && '导入成功') || '导入失败';
                  }
                }
              ]}
              rowKey={(record, index) => index}
              pagination={false}
            ></Table>
          </Tabs.TabPane>
          <Tabs.TabPane tab='事件' key='5'>
            <Table
              className='strategy-operater-table'
              dataSource={props.data.event.lists || []}
              columns={[
                {
                  title: '序号',
                  render: (text, record, index) => {
                    return <>{index + 1}</>;
                  }
                },
                {
                  title: '事件名',
                  key: 'name',
                  dataIndex: 'name',
                  ellipsis: true,
                  width: 150
                },
                {
                  title: '描述',
                  key: 'remark',
                  dataIndex: 'remark',
                  ellipsis: true
                },
                {
                  title: '导入状态',
                  key: 'status',
                  dataIndex: 'status',
                  width: 200,
                  render: (text, record) => {
                    return (text && '导入成功') || '导入失败';
                  }
                }
              ]}
              rowKey={(record, index) => index}
              pagination={false}
            ></Table>
          </Tabs.TabPane>
        </Tabs>
      </div>
    </>
  );
}
